﻿<%@ Page Title="" Language="C#" MasterPageFile="../MasterPages/StoreMaster.master" AutoEventWireup="true" Inherits="Codagenic.Store.Presentation.Web.Pages.Search" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">    

    <style type="text/css">

	    #suggestions {
		    display: none;
		    position: absolute;
		    background: #fff;
		    left:50px;
		    top:200px;
		    margin:0;
		    width: 600px;
		    height: 400px;
		    overflow: scroll;
		    padding:0 6px;
		    z-index: 100;
		    border:1px solid #5287a6;
		    background:#f5f8fa;
	    }

	    #suggestions ul {
		    list-style: none; 
		    padding: 0;
		    margin: 0;
	    }
	
	    #suggestions ul li {
		    border-bottom: solid 1px #d0e0e5;
		    padding: 5px;
		    height: 150px;
		    clear: both;
	    }

	    #suggestions ul li a {
		    text-decoration: none;
		    color: #014f7c;
	    }

	    #suggestions ul li a:hover {
		    text-decoration: none;
		    color: #000;
	    }        
        
    </style>

    <div class="row">

        <div class="sixteen columns search-header">
            <h5><asp:Literal ID="ltlSearchResults" runat="server"></asp:Literal></h5>                
            <div class="pull-right">
                <asp:Literal ID="ltlSuggestions" runat="server"></asp:Literal>
            </div>                  
        </div>

        <div class="four columns">

            <!-- search facets -->
            <div class="ui-faceted">
                <asp:Repeater ID="rpFacets" runat="server" OnItemDataBound="rpFacets_ItemDataBound">
                    <ItemTemplate>
                        <div>
                            <a class="header"><%# Eval("Title") %></a>
                            <asp:Repeater ID="rpFacetValues" runat="server">
                                <HeaderTemplate>                            
                                    <ul>                        
                                </HeaderTemplate>
                                <ItemTemplate>
                                    <li><a href="<%= Codagenic.Store.Config.StoreConfigManager.Urls["SearchUrl"].Value %>?<%# Eval("QueryString") %>"><%# Eval("Value")%></a> (<%# Eval("Hits")%>)</li>
                                </ItemTemplate>
                                <FooterTemplate>
                                    </ul>
                                </FooterTemplate>
                            </asp:Repeater>
                            <asp:PlaceHolder ID="phSelectedFacet" runat="server" Visible="false">                        
                                <ul>
                                    <li>Viewing "<strong><asp:Literal ID="ltlSelectedValue" runat="server"></asp:Literal></strong>"</li>
                                    <li><a href="<%= Codagenic.Store.Config.StoreConfigManager.Urls["SearchUrl"].Value %>?<%# Eval("ResetQueryString") %>">Display All</a></li>                            
                                </ul>                
                            </asp:PlaceHolder>
                        </div>
                    </ItemTemplate>         
                </asp:Repeater>
            </div>

        </div>

        <div class="twelve columns omega">
            
            <div class="row">
                <asp:Repeater ID="rpSearchResults" runat="server">    
                    <HeaderTemplate>
                        <ul class="product-listing unstyled clearfix">
                    </HeaderTemplate>
                    <ItemTemplate>            
                        <li class="item">
                            <a href="../Store/ProductRedirect.aspx?pid=<%# Eval("ProductId") %>">
                                <span class="thumb">
                                    <img src="<%# Eval("Image") %>" alt="<%# Eval("Title") %>" />
                                </span>
                                <span class="title">
                                    <%# Eval("Title")%>
                                </span>
                                <span class="price">
                                    <%# Eval("Price")%>
                                </span>
                            </a>                   
                        </li>
                    </ItemTemplate>
                    <FooterTemplate>
                        </ul>
                    </FooterTemplate>
                </asp:Repeater>
            </div>
                
            <div class="row">
                <ul class="pager send-right">
                    <asp:PlaceHolder ID="phPagerButtons" runat="server" />                       
                </ul> 
            </div>
                
            <asp:HiddenField ID="txtCurrentPage" runat="server" />
            <asp:HiddenField ID="txtTotalPages" runat="server" /> 
        </div>

    </div>

    <script language="javascript" type="text/javascript">

        codagenic = {
        }

        codagenic.Search = {

            _selectedSuggestionIndex: -1,
            _totalSuggestions: 0,

            displayResult: function (id) {
                window.location = "../ProductRedirect.aspx?pid=" + id;
            },

            displaySuggestions: function (result) {

                if (result == '') {
                    $("#suggestions").hide();
                    $("#suggestions").empty();

                    // reset the selected index
                    codagenic.Search._selectedSuggestionIndex = 0;
                }
                else {
                    $("#suggestions").empty();
                    $("#suggestions").html(result);
                    $("#suggestions").show();

                    codagenic.Search._totalSuggestions = $("#suggestions ul li").length - 1;
                }
            },

            loadSearch: function (value) {
                UseCallback("search|" + value);
            },

            loadSuggestions: function (value) {
                UseCallback("suggestion|" + value);
            },

            setSuggestion: function (value) {

                $("#").val(value);

                $("#suggestions").hide();
                $("#suggestions").empty();

                // reset the selected index
                codagenic.Search._selectedSuggestionIndex = 0;
            },

            init: function () {

                $("#").bind("keyup",
                    function (e) {
                        if (e.keyCode == 38) {
                            // up key
                            codagenic.Search._selectedSuggestionIndex--;

                            if (codagenic.Search._selectedSuggestionIndex < 0) {
                                codagenic.Search._selectedSuggestionIndex = 0;
                            }

                            $("#suggestions ul li a").css("color", "");
                            $("#suggestions ul li:eq(" + codagenic.Search._selectedSuggestionIndex + ") a").css("color", "red");
                        }
                        else if (e.keyCode == 40) {
                            // down key
                            codagenic.Search._selectedSuggestionIndex++;

                            if (codagenic.Search._selectedSuggestionIndex > codagenic.Search._totalSuggestions) {
                                codagenic.Search._selectedSuggestionIndex = codagenic.Search._totalSuggestions;
                            }

                            $("#suggestions ul li a").css("color", "");
                            $("#suggestions ul li:eq(" + (codagenic.Search._selectedSuggestionIndex) + ") a").css("color", "red");
                        }
                        else if (e.keyCode == 13) {
                            // enter key do nothing
                        }
                        else if (e.keyCode == 27) {
                            // escape key 
                        }
                        else {
                            codagenic.Search._selectedSuggestionIndex = -1;

                            if (this.value.length >= 3) {

                                // load suggestions
                                //codagenic.Search.loadSuggestions(this.value);

                                // load search results
                                codagenic.Search.loadSearch(this.value);
                            }
                            else {
                                $("#suggestions").hide();
                                $("#suggestions").empty();
                            }
                        }
                    });

            }
        }

        // init the search javascript
        $(document).ready(function () {
            //codagenic.Search.init();
        });        

    </script>

</asp:Content>

